<!-- 营销海报 -->
<template>
    <div class="poster">
        <x-header v-show="!isWeChar" class="myHeader">
            <div slot="default" class="common__header--title">营销海报</div>
            <div @click="goBack" slot="overwrite-left" class="common__header--img">
                <img slot="icon" src="~assets/x3/ico/goback1.png" class="go-back">
            </div>
        </x-header>
        <div class="typeSeclector">
            <scroller :lock-x="false" lock-y>
                <div class="typeSeclector_btn">
                    <checker v-model="selectPosterType" radio-required default-item-class="common__item" selected-item-class="common__item-selected common__bacolor--DefaultTheme">
                        <checker-item class="grid-center" :value="item.key" v-for="(item, index) in thisPosterTypeList" :key="index">{{item.value}}</checker-item>
                    </checker>
                </div>
            </scroller>
        </div>
        <div class="poster_myserch">
            <x-input @on-enter="onEnter" v-model="serchKey" placeholder="搜索">
                <img slot="label" style="padding-right:10px;display:block;" src="~assets/x3/ico/search.png" width="24" height="24">
            </x-input>
        </div>

        <div class="row_list" id="row_list">
            <transition name="slide-fade">
                <!-- max-width:750px; 此宽度用于整体页面固定时-->
                <vue-scroller v-show="showAnimate" :style="scrollerTop" :on-refresh="refresh" :on-infinite="infinite" ref="my_scroller">
                    <grid :cols="2" class="row_list_grid">
                        <grid-item v-for="(item, index) in shop.curShowPosterList" :key="index">
                            <span slot="label">
                                <div class="row_poster" @click="showPosterOne(item)">
                                    <img :key="item.name" :src="item.imgUrl">
                                    <div class="row_poster_title">
                                        <div class="name">{{item.name}}</div>
                                        <div v-show="item.type=='2'&&item.rate!='NaN'&&!isNaN(item.rate)&&item.rate!=0.0&&item.rate!=0" class="generalize">推广费{{item.rate|rate}}%</div>
                                    </div>
                                    <div class="row_poster_desc">{{item.summaryInfo}}</div>
                                    <!-- 1 = 店铺海报（无需显示该标签） -->
                                    <span v-if="item.type != '1'" class="row_poster_generalize">{{item.productName}}</span>
                                </div>
                            </span>
                        </grid-item>
                    </grid>
                </vue-scroller>
            </transition>
        </div>
    </div>
</template>

<script>
import { RequestUrl } from "src/common/url";
// import SharePage from "src/js/sharePage"; //引入微信分享js
import Config from "src/common/config/shoConfig";
import vueScroller from "src/common/vueScroller/components/Scroller";
import { XHeader, Group, Grid, GridItem, Cell, XButton, XInput, XSwitch, Selector, Scroller, Search, Checker, CheckerItem } from "vux";
import { mapState, mapActions } from "vuex";
import { Mutations, RouteUrl, Url_Key } from "src/common/const";
export default {
    components: { vueScroller, XHeader, Group, Grid, GridItem, Cell, XButton, XInput, XSwitch, Selector, Scroller, Search, Checker, CheckerItem },
    data() {
        return {
            selectPosterType: Config.getPosterType(0).key,//默认选中项
            thisPosterTypeList: Config.getPosterTypeAll(),//软文类型
            seachResults: [],//搜索列表
            seachValue: "",//搜索文本
            scrollerTop: "position: fixed;padding-top: 126px;padding-bottom: 600px;z-index:0;",
            showAnimate: true,//显示刷新卡片
            serchKey: "",//搜索关键词
        };
    },
    computed: mapState(["isWeChar", "riskCodeList", "shop", "saveInsure", "shareUuid", "user"]),
    filters: {
        filter_val(val) {
            return val;
        },
        rate(value) {
            value = value * 100;
            value = value + "";
            let num = value.indexOf('.');
            if (num < 1) {
                return value;
            } else {
                return value.substring(0, num);
            }
        },
    },
    watch: {
        selectPosterType(cur, old) {
            this.showAnimate = false;
            //3=邀请海报
            if (cur == "3") {
                this.$common.goUrl(this, RouteUrl.REGISTER_POSTER);
            } else {
                let _this = this;
                //懒加载追加新请求的数据列表
                this.queryDataByType("infinite");
                setTimeout(function () {
                    _this.showAnimate = true;
                }, 100);
            }
        }
    },
    methods: {
        // initShare() {
        //     // refShareUUid
        //     let _this = this;
        //     let parmList = [];
        //     let uuid = "";
        //     uuid = this.shareUuid;
        //     let urlParm = {
        //         key: Url_Key.SHARE_UUID,
        //         value: uuid
        //     }
        //     parmList.push(urlParm);
        //     let shareUrl = RequestUrl.BASE_URL + RouteUrl.SHOP_INDEX + this.$common.setShareUrl(parmList);
        //     this.shopShareUrl = shareUrl;
        //     let shopIntroduct = this.shop.shopHeaderState.shopIntroduct;
        //     if (this.$common.isEmpty(shopIntroduct)) {
        //         shopIntroduct = "恒华出行宝";
        //     }

        //     let imgUrl = this.shop.shopHeaderState.header;
        //     if (imgUrl.indexOf("http://") < 0 && imgUrl.indexOf("https://") < 0) {
        //         //补全产品的图片路径
        //         imgUrl = RequestUrl.WEB_PATH + imgUrl;
        //     }
        //     if (imgUrl == "") {
        //         imgUrl = RequestUrl.WEB_PATH + "sticcxb/upload/assets/x3/logo.jpg"
        //     }

        //     // alert("shopUrl:" + shareUrl);
        //     let shareData = {
        //         _this: this,
        //         shareData: {
        //             title: this.shop.shopHeaderState.shopName,
        //             desc: shopIntroduct,
        //             imgUrl: imgUrl,
        //             url: shareUrl,
        //             _this: this,
        //             type: 3
        //         }
        //     };
        //     // document.title = this.shop.shopHeaderState.shopName;
        //     // share.shareInit(shareData);

        //     SharePage.weChatShare(shareData);

        // },
        goBack() {
            this.$common.goBack(this);
        },
        //搜索
        onEnter() {
            this.queryDataByType("infinite");
        },
        //页面刷新
        refresh(done) {
            let _this = this;
            $("#row_list").fadeOut();
            setTimeout(() => {
                _this.queryDataByType("refresh", done);
                done();
            }, 500);
            $("#row_list").fadeIn();
        },
        //当用户滚动的距离超出底部的内容时触发;
        infinite(done) {
            let _this = this;
            setTimeout(() => {
                _this.queryDataByType("infinite", done);
                done(_this.shop.posterIsEnd);
            }, 500);
        },
        queryDataByType(operation, done) {
            let branchCode = "";

            if (this.$common.isNotEmpty(this.user.userDto.agrementNo) && this.$common.isNotEmpty(this.user.userDto.branchCode)) {
                branchCode = this.user.userDto.branchCode;
            } else if (this.$common.isNotEmpty(this.user.userDto.areaCode)) {
                branchCode = this.user.userDto.areaCode;
            }

            if (this.$common.isEmpty(branchCode)) {
                branchCode = this.saveInsure.hotArea.areaCode;
            }
            let queryData = {
                _this: this,
                operation: operation,
                selectPosterType: this.selectPosterType,
                done: done,
                type: "poster",
                branchCode: branchCode,
                serchKey: this.serchKey,
                userCode: this.user.userDto.userCode
            };
            this.posterIsQuery = true;//可查询
            this.$common.storeCommit(this, Mutations.SHOP_POSTER_LIST, queryData);
        },
        showPosterOne(item) {
            let _this = this;
            let parmList = [];
            let urlPro = {
                key: Url_Key.SHOW_POSTER,
                value: item.id
            }
            parmList.push(urlPro);
            // parmList.push(urlParm);
            let data = {
                type: "set",
                data: item
            }
            this.$common.storeCommit(this, Mutations.SET_POSTER_LIST, data);
            _this.$common.goUrl(_this, RouteUrl.SHOW_POSTER, _this.$common.setShareUrl(parmList));
            // let queyData = { _this: this, id: item.id, type: 'go' }
            //查询海报
            // this.$common.storeCommit(this, Mutations.SET_POSTER, queyData);
        },
        //初始化当前页面
        initPage() {
            //及时更新状态保持里的选择类型
            this.selectPosterType = this.shop.selectPosterType;
            //设置滚动区域底部距离
            // this.$common.storeCommit(this, Mutations.IS_SHOW_VUE_SCROLLER_RE, true);
            this.$common.storeCommit(this, Mutations.VUE_SCROLLER_BTN, 690);
            this.$common.storeCommit(this, Mutations.VUE_SCROLLER_NO_MORE_DATA, "没有更多海报了");
            if (this.isWeChar) {
                this.scrollerTop = "position: fixed;padding-top: 86px;padding-bottom: 600px;z-index:0;";
            }
        },
    },
    mounted() {
        document.title = "营销海报";
        this.$init.subPageInit(this);
        //初始化当前页面
        this.initPage();
        // this.initShare();
    },
}
function getResult(val) {
    let rs = []
    for (let i = 0; i < 20; i++) {
        rs.push({
            title: `${val} result: ${i + 1} `,
            other: i
        })
    }
    return rs
}
</script>

<style lang="scss" >
.poster {
  .myHeader {
    z-index: 2;
  }
  //海报类型选择
  .typeSeclector {
    position: relative;
    height: 35px;
    padding: 5px 20px 0px 20px;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    background-color: #fff;
    z-index: 2; //auto：默认值。浏览器允许一些手势（touch）操作在设置了此属性的元素上，例如：对视口（viewport）平移、缩放等操作。
    //none：禁止触发默认的手势操作
    //pan-x：可以在父级元素(the nearest ancestor)内进行水平移动的手势操作。
    //pan-y：可以在父级元素内进行垂直移动的手势操作。
    //manipulation：允许手势水平/垂直平移或持续的缩放。任何auto属性支持的额外操作都不支持。
    //touch-action只支持具有CSS width和height属性的元素
    touch-action: none;
    user-select: none;
    -webkit-user-drag: none;
  }
  //类型单个按钮
  .typeSeclector_btn {
    width: max-content;
    text-align: center;
  }
  //自定义搜索框
  .poster_myserch {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 30px;
    padding-top: 3px;
    padding-bottom: 10px;
    line-height: 36px;
    background-color: #efefef;
    border-bottom: 1px solid #e5e5e5;
    .weui-cell {
      //   margin: 10px 10px;
      padding: 0px 10px;
      background-color: white;
      border-radius: 5px;
    }
  }
  .row_list {
    position: relative;
    width: 100%;
    .row_list_grid {
      padding-left: 12px;
      background-color: white;
      .weui-grids:before {
        border: 0px;
      }
      .weui-grid {
        padding: 12px 12px 0px 0px;
      }
      .weui-grid:before {
        border: 0px;
      }
      .weui-grid:after {
        border: 0px;
      }
    }
    .row_poster {
      padding-bottom: 5px;
      text-align: left;
      background-color: white;
      img {
        width: 100%;
        height: auto;
        border-radius: 5px;
      }
      .row_poster_title {
        font-size: 14px;
        min-height: 25px;
        line-height: 25px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        .name {
          float: left;
          width: 50%;
          text-align: left;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .generalize {
          float: left;
          width: 50%;
          font-size: 12px;
          text-align: right;
        }
      }
      .row_poster_desc {
        width: 100%;
        min-height: 25px;
        font-size: 12px;
        text-align: left;
        color: gray;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .row_poster_generalize {
        width: 77%;
        font-size: 12px;
        border: 1px solid #bcbcbc;
        border-radius: 2px;
        padding: 1px 5px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
</style>
